<!DOCTYPE html>
<html>

	<head>
	<meta charset="utf-8" />
	<title>商品付款二维码</title>
	<link rel="stylesheet" href="__AGENT__/css/iconfont.css" />
	<link rel="stylesheet" href="__AGENT__/css/css.css" />
	<style type="text/css">
		.payment_erweima canvas{width: 200px; height: 200px;}
		body {overflow:scroll; overflow-y:hidden;} 
		.fkselbox{background: white; margin-bottom: 10px; border: 1px solid #DDDDDD;}
		.my_sel{background: none; height: 40px; line-height: 40px; font-weight: bold; color: #79A42A; font-size: 20px; width: 100%;}
		.my_sel option{font-size: 16px;}
	</style>
</head>

<body>		
	
	<div class="erweima_con" id='payment_conbox' style="padding-bottom: 1px;">
		<div class="payment_conbox" >
			<div class="erweim_bt">
				<div class="payment_shh">{$agent_info['goods_name']}</div>
			</div>
			<div class="sherweimabox">						
				<div class="payment_erweima"  >
					<div id="qrcode"></div>
				</div>
			</div>
		</div>
		<div class="payment_butbox"><img src="__AGENT__/img/bac_fukuan2.jpg"></div>
	</div>
	<div class="payment_butbox" ><button type="button" onclick="savepic()" class="payment_but" style="padding: 5px;background: #63b43b;    padding-bottom: 10px;">保存二维码</button></div>
</body>

</html>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/layui/layui.all.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/jquery.qrcode.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/utf.js"></script>
<script type="text/javascript" src="__PUBLIC__/static/js/zepto-1.1.6.min.js"></script>
<script type="text/javascript" src='__PUBLIC__/static/js/html2canvas.js'></script>
<script>
	change_code();
	function change_code(){
		var index = layer.load(0, {shade: false,time: 1.5 * 1000});
		$(".layui-layer-loading").css("left", "50%");
		var url = "{$agent_info.code_url}";
		
		var img = "{$agent_info.logo}";
		 $("#qrcode").qrcode({
	        render : "canvas",    		//设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
	        text 		: url,    		//扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
	        width 		: "180",    	//二维码的宽度
	        height 		: "180",    	//二维码的高度
	        background 	: "#ffffff",    //二维码的后景色
	        foreground 	: "#000000",    //二维码的前景色
	    });
		 setTimeout(function(){
		html2canvas($("#payment_conbox"), {
			 onrendered: function (canvas) {
			     var url = canvas.toDataURL(); //base64数据
			     var image = new Image();
			     image.src = url;
			     image.id = 'div_img';
			   }
			});
	},1000);
	}
   
</script>
<script>
//下载图片
function savepic() {
	var img_src = $('#div_img')[0].src;
	var type = 'png';
	// 下载后的问题名
	var filename = 'pic_' + (new Date()).getTime() + '.' + type;
	// download
	saveFile(img_src,filename);
	
}

/**
 * 在本地进行文件保存
 */
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
   
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};
</script>